<template>
  <view class="teacher-list-page">
    <swiperPage
        :swiperList="bannerList"
        :interval="4000"
    />
    <view style="background-color: #fff;padding: 10px;border-radius: 0 0 20px 20px;z-index: 950">
      <view class="search-input-wrapper">
        <view class="search-icon">
          <!--        <image src="/static/search-icon.png" mode="aspectFit"></image> &lt;!&ndash; 替换为实际的搜索图标路径 &ndash;&gt;-->
          <text class="iconfont icon-sousuo"></text>
        </view>
        <input type="text" placeholder="搜索" v-model="propagation.name" class="search-input" />
        <view class="block" style="background-color: #8B5D3B;height: 40px;width: 20%;position: absolute;right: 0;
      border-radius: 0 20px 20px 0;line-height: 40px;text-align: center;color: #FCFAF6;" @click="getList(true)">搜索
        </view>
      </view>
      <view class="filter-bar">
        <view class="filter-btn" @click="menu">
          <image style="width: 40rpx;height: 40rpx;margin-right: 10rpx" :src="IMAGE_CONFIG.fenLei"></image>分类
        </view>
      </view>
      <view :class="state?'yes':'no'" style="transition: 1s ease; ">
        <view v-if="state">
          <view class="condition block" v-for="(item,index) in condition" :key="index">
            <view @click="searchByCategory(item.id)">
              {{item.name}}
            </view>
          </view>
        </view>
      </view>
    </view>
    <view style="padding: 15px;position: relative" :style="state?'height: 955rpx':''">
      <view
          class="masks"
          v-show="isMaskVisible"
          @click="hideMask"
      ></view>
      <view class="teacher-item" v-for="(teacher, index) in teacherList" :key="index" @click="jumpIntroductory(teacher)">
        <view class="teacher-avatar">
          <image :src="teacher.avatar" mode="aspectFill"></image>
        </view>
        <view class="teacher-info">
          <view class="teacher-name">
            {{ teacher.name }}
          </view>
          <view class="teacher-title">{{ teacher.title }}</view>
          <view class="icon">
            <image :src="IMAGE_CONFIG.logo2"></image>
          </view>
          <view class="teacher-profession">{{ teacher.profession }}</view>
          <view class="teacher-intro">{{ teacher.intro }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {IMAGE_CONFIG} from '@/utils/imageConfig'
import swiperPage from './components/swiperPage.vue';
import {getTeacherBanner, getTeacherCategory, getTeacherList} from "../../../api/new";
export default {
  components: { swiperPage },
  data() {
    return {
      IMAGE_CONFIG: IMAGE_CONFIG.index,
      bannerList: [],
      state:false,
      isMaskVisible:false,
      menu1:true,
      searchValue: '',
      teacherList: [],
      condition:[],

      propagation:{
        limit:10,
        page:1,
        categoryId:'',
        name:''
      }
    };
  },
  onShow: function () {
    this.getList(false)
    this.getCategory()
  },
  onReachBottom(){
    this.getList(false)
  },
  methods:{
    searchByCategory(id){
      this.propagation.categoryId=id
      this.getList(true)
    },
    getList(item){
      if(item){
        this.propagation.page=1
        this.teacherList=[]
      }
      getTeacherList(this.propagation).then(res=>{
        if (this.propagation.page === 1) {
          this.teacherList = res.data.list; // 第一页直接替换
        } else {
          this.teacherList = [...this.course, ...res.data.list]; // 后续页追加数据
        }
        this.propagation.page=res.data.page+1
      })
    },
    getCategory(){
      getTeacherCategory().then(res=>{
        this.condition=res.data
      })
      getTeacherBanner().then(res=>{
        this.bannerList=res.data
      })
    },
    menu(){
      if(this.menu1){
        this.state=true
        this.isMaskVisible=true
        this.menu1=false
      }else{
        this.state=false
        this.isMaskVisible=false
        this.menu1=true
      }
    },
    hideMask() {
      this.state = false;
      this.isMaskVisible = false;
      this.menu1=true
    },
    jumpIntroductory(item){
      uni.navigateTo({
        url: `/pages/goods/lecturer/introductory?item=${JSON.stringify(item)}`
      })
    },
    // handleBannerClick(item, index) {
    //   console.log('点击轮播图:', item, index);
    //   // 处理点击事件，如跳转到详情页
    // }
  }
};
</script>

<style lang="scss" scoped>
.block {
  display: inline-block;
}
.teacher-list-page {
}
.teacher-title{
  background-color: #fcf7c1;
  color: #844c0e;
  padding: 4px 8px;
  width: 270rpx;
  text-align: center;
  border-radius: 5px;
  margin-bottom: 8px;
  white-space: nowrap;      /* 禁止换行 */
  overflow: hidden;         /* 超出部分隐藏 */
  text-overflow: ellipsis;  /* 显示省略号 */
}
.icon{
  position: absolute;
  top: 15px;
  right: 25px;
  width: 42rpx;
  height: 50rpx;
  image{
    width: 100%; /* 图片宽度撑满容器 */
    height: 100%; /* 图片高度撑满容器 */
    object-fit: contain; /* 图片等比缩放，填满容器，可能裁剪 */
  }
}
.masks {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 955rpx;
  z-index: 900; /* 确保在最上层 */
}
.search-input-wrapper {
  display: flex;
  align-items: center;
  background-color: #faf8f4;
  border-radius: 20px; /* 实现圆角效果 */
  padding: 0 15px;
  margin-bottom: 10px;
  position: relative;
  .search-icon {
    width: 20px;
    height: 20px;
    margin-right: 10px;
  }
  .search-input {
    width: 480rpx;
    height: 40px;
    border: none;
    font-size: 16px;
    &::placeholder {
      color: #ccc;
    }
  }
}

.filter-bar {
  margin-bottom: 2px;
  .filter-btn {
    margin-left: 66rpx;
    display: flex;
    align-items: center;
  }
}
.yes{
  min-height: 170rpx;
  padding-top: 15px;
  transform: translate3d(0, 0, 0);
  .condition{
    width: 50%;
    text-align: center;
    margin-bottom: 4px;
  }
}
.no{
  height: 0;
  transform: translate3d(0, 100%, 0);
}

.teacher-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 15px;
  background-color: white;
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 4px 5px -1px rgba(179, 169, 169, 0.1);
  border: 1px solid rgba(179, 169, 169, 0.1);
  .teacher-avatar {
    width: 80px;
    height: 80px;
    margin-right: 10px;
    border-radius: 10px;
    image {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }
  .teacher-info {
    position: relative;
    flex: 1;
    .teacher-name {
      margin-bottom: 10px;
      white-space: nowrap;      /* 禁止换行 */
      overflow: hidden;         /* 超出部分隐藏 */
      text-overflow: ellipsis;  /* 显示省略号 */
      width: 300rpx;
      font-size: 40rpx;
      font-weight: bold;
    }
    .teacher-profession {
      color: #666;
      margin-bottom: 5px;
    }
    .teacher-intro {
      color: #999;
      display: -webkit-box;      /* 必须 */
      -webkit-box-orient: vertical; /* 垂直排列子元素 */
      -webkit-line-clamp: 2;     /* 显示的行数 */
      overflow: hidden;          /* 超出部分隐藏 */
      width: 100%;          /* 宽度限制 */
      line-height: 1;
      max-height: 2em;
    }
  }
}
</style>